import QtQuick 2.0

Item {
    id:boardItem
    visible: true
    width: 245
    height: 245

    property int current_angle: 0
    property int r: 115
    property bool display_mode: false
    property double current_speed: 0
    property int current_engine: 0
    property int gear_position: 0
    property int gear_direction: 0
    property int max_speed: 13
    property int max_engine: 2200

    onCurrent_speedChanged: {
        current_angle = current_speed/max_speed * 360
        canvas.requestPaint()
    }
    onCurrent_engineChanged: {
        current_angle = current_engine/max_engine * 360
        canvas.requestPaint()
    }

    onGear_positionChanged: {
        canvas.requestPaint()
    }
    onGear_directionChanged: {
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d");
            ctx.reset();
            ctx.save()

            ctx.translate(canvas.width / 2, canvas.height / 2)
             // 底图
            ctx.clearRect(-width/2, -height/2, width, height);
            ctx.fillStyle  = "#2B5A78";
            ctx.beginPath();
            ctx.arc(0, 0, boardItem.r, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();

            var startRadian = 0
            var endRadian = 2*Math.PI
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = 150;
            var gradient = ctx.createLinearGradient(0,-radius , 0, radius);
            gradient.addColorStop(0, "#00FFFF");
            gradient.addColorStop(1, "#005696");
            ctx.save()
            ctx.lineWidth = 14;
            ctx.lineCap = "round"
            ctx.strokeStyle = "#285069";
            ctx.beginPath();
            ctx.arc(0, 0, boardItem.r - 20 , startRadian, endRadian);
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.lineWidth = 14;
            ctx.lineCap = "round"
            ctx.strokeStyle = gradient;
            ctx.beginPath();
            ctx.arc(0, 0, boardItem.r - 20, 90/180*Math.PI, boardItem.current_angle/180*Math.PI+90/180*Math.PI);
            ctx.stroke()
            ctx.restore()

            var x = (boardItem.r - 20) * Math.cos(boardItem.current_angle/180*Math.PI+90/180*Math.PI)
            var y = (boardItem.r - 20) * Math.sin(boardItem.current_angle/180*Math.PI+90/180*Math.PI)
            ctx.fillStyle  = "#000000";
            ctx.beginPath();
            ctx.arc(x,y, 5, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();
            ctx.fillStyle  = "rgba(00, 255, 255, 0.5)";
            ctx.beginPath();
            ctx.arc(x,y, 1, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();

            if(boardItem.display_mode)
            {
                //绘制当前速度值
                ctx.save()
                ctx.fillStyle = "white"
                ctx.font = "66px Aldrich"
                ctx.textAlign = "center"
//                if(boardItem.gear_direction > 0){
//                    if(boardItem.gear_position == 0)
//                         ctx.fillText("P",0,0)
//                    else if(boardItem.gear_position == 1)
//                        ctx.fillText("F1",0,0)
//                    else if(boardItem.gear_position == 2)
//                        ctx.fillText("F2",0,0)
//                }else if(boardItem.gear_direction < 0){
//                    ctx.fillText("N",0,0)
//                }else{
//                    ctx.fillText("P",0,0)
//                }
                if(boardItem.gear_direction==0)
                    ctx.fillText("N",0,0)
                else if(gear_direction==1)
                {
                    ctx.fillText("D",0,0)
                    ctx.font = "40px  Aldrich"
                    ctx.fillText(String(gear_position), 0, 40)
                }
                else if(gear_direction==2)
                {
                    ctx.fillText("R",0,0)
                    ctx.font = "40px  Aldrich"
                    ctx.fillText(String(gear_position), 0, 40)
                }

                ctx.restore()

                //绘制当前单位
                ctx.save()
                ctx.fillStyle = "white"
                ctx.font = "22px Aldrich"
                ctx.textAlign = "center"
                ctx.fillText(String(boardItem.current_engine) + String(" rpm"),0,40)
                ctx.restore()
            }else
            {
                //绘制当前速度值
                ctx.save()
                ctx.fillStyle = "white"
                ctx.font = "80px Aldrich"
                ctx.textAlign = "center"
                ctx.fillText(String(boardItem.current_speed),0,0)
                ctx.restore()

                //绘制当前单位
                ctx.save()
                ctx.fillStyle = "white"
                ctx.font = "27px Aldrich"
                ctx.textAlign = "center"
                ctx.fillText(String("km/h"),0,40)
                ctx.restore()
            }
        }

    }

}
